<template>
  <div class="index-container">
    <div class="table-header-btn-wrap" style="height: 30px">
      <el-button @click="onClickSearch" v-loading="listLoading">刷新</el-button>
    </div>
    <div class="table-wrap" style="height: calc(100% - 100px)">
      <el-table :data="orders" border v-loading="listLoading" height="100%" :empty-text="'数据为空'">
        <el-table-column prop="id" label="订单号" width="80px">
        </el-table-column>
        <el-table-column prop="user_id" label="用户姓名" width="100px">
          <template #default="scope">
            <span>{{ scope.row.user.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="user_id" label="电话" width="120px">
          <template #default="scope">
            <span>{{ scope.row.user.phone }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="type_id" label="预定房间类型" width="220px">
          <template #default="scope">
            <span>{{ scope.row.type.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="用房时间" width="260px">
          <template #default="scope">
            <div style="width: 100%;display: flex;flex-wrap: wrap;">
              <div class="date-item" v-for="k in scope.row.reserveDate">{{ k }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="unitPrice" label="单价" width="80px">
        </el-table-column>
        <el-table-column prop="price" label="总费用" width="100px">
        </el-table-column>
        <el-table-column prop="createTime" label="预定时间" width="180px">
          <template #default="scope">
            {{ $filters.formatDate(scope.row.createTime) }}
          </template>
        </el-table-column>

        <el-table-column prop="status" label="状态" width="170px">
          <template #default="scope">
            <el-tag v-if="scope.row.status === 'WAITING'">等待工作人员确认</el-tag>
            <el-tag v-else-if="scope.row.status === 'CONFIRM'" type="success">订单已确认，等待入住</el-tag>
            <el-tag v-else-if="scope.row.status === 'BACK'" type="error">房间已满，退回</el-tag>
            <el-tag v-else-if="scope.row.status === 'CANCEL'" type="warning">用户主动，取消</el-tag>
          </template>
        </el-table-column>


        <el-table-column prop="excerpt" label="操作" width="160px">
          <template #default="scope">
            <el-button type="success" v-if="scope.row.status === 'WAITING'" @click="onClickConfirm(scope.row)">确认
            </el-button>
            <el-button type="warning" v-if="scope.row.status === 'WAITING'" @click="onClickBack(scope.row)">退回
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="page-wrap"
         style="height: 40px;margin-top: 20px;display: flex;align-items: center;justify-content: space-between;">
      <div class="span" style="font-size: 14px;color: #333;margin-right: 20px;">总数：{{ total }}</div>
      <el-pagination
          small
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="query.page"
          class="mt-4"
          @current-change="pageChange"
          :page-size="query.page_size"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import {computed, onMounted, reactive, ref} from "vue";
import $api from "@/api";
import {useRouter} from "vue-router";
import {ElMessage, ElMessageBox, ElNotification} from 'element-plus'
import type {FormInstance, FormRules, UploadProps} from "element-plus";
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

const locale = zhCn
const router = useRouter()
const uploadServer = import.meta.env.VITE_SERVER
const clickOpen = (row: any) => {
  router.push('/book/' + row.id)
}


onMounted(() => {
  search()
})

/**
 * 查询房间
 */

var listLoading = ref(false) //列表接口是否在加载

const total = ref(0) //总数

const query = reactive({
  page: 1,
  page_size: 20,
  keyword: ''
})
const pageChange = (page: number) => {
  query.page = page
  getList()
}
const onClickSearch = () => {
  search()
}

const search = () => {
  query.page = 1
  getList()
}

const orders = ref([])
const getList = () => {
  listLoading.value = true
  orders.value = []
  $api.orderApi.fetchListJoinTypeAndUser(query).then((res: any) => {
    res.results.forEach(item => {
      item.reserveDate = JSON.parse(item.reserveDate)
    })
    total.value = res.total
    orders.value = res.results
    listLoading.value = false
  }).catch(() => {
    listLoading.value = false
  })
}
/**
 * 点击确认
 */
const onClickConfirm = (order: any) => {
  ElMessageBox.confirm(
      '确定已经为客户安排好房间?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        submitConfirm(order)
      })
}
const submitConfirm = (order: any) => {
  $api.orderApi.setOrderStatus({
    id: order.id,
    status: 'CONFIRM'
  }).then(res => {
    ElNotification({
      title: '成功',
      message: '操作成功！',
      type: 'success',
    })
    getList()
  })
}
/**
 * 点击退回
 */
const onClickBack = (order: any) => {
  ElMessageBox.confirm(
      '确定要退回用户的约定?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        submitBack(order)
      })
}
const submitBack = (order: any) => {
  $api.orderApi.setOrderStatus({
    id: order.id,
    status: 'BACK'
  }).then(res => {
    ElNotification({
      title: '成功',
      message: '操作成功！',
      type: 'success',
    })
    getList()
  })
}
</script>
<style scoped lang="scss">
.index-container {
  padding: 20px;
  width: 100%;
  height: 100%;
}

.table-wrap {
  margin-top: 20px;
}

.excerpt {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.date-item {
  width: 100px;
  border: 1px solid #3a3a3a;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-right: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
}
</style>